<template>
  <div class="card-basic">

    <div v-if="$slots.header || header" class="card-header" :style="headerStyle">
      <slot name="header" :getVal="getVal"><h3>{{header}}</h3></slot>
    </div>

    <div class="card-body" :style="bodyStyle">
      <slot :getVal="getVal"/>
    </div>

  </div>
</template>

<script setup>
  import useHookData from "@/hook/data";
  import { onMounted, watch } from "vue";
  // 'chartId', 'data', 'params'
  const props = defineProps({
    chartId: {
      type: String,
      default: ''
    },
    data: {
      type: [Array, Object, String, Number],
      default: () => null
    },
    params: {
      type: Object,
      default: () => ({})
    },

    header: {
      type: String,
      default: ''
    },
    headerStyle: {
      type: Object,
      default: () => ({})
    },
    bodyStyle: {
      type: Object,
      default: () => ({})
    },
    customClass: {
      type: String,
      default: 'my-card'
    }
  });

  const {getData, getVal} = useHookData(props);

  onMounted(()=> {
    initData();
  });

  /*watch(
    () => props.data,
    (newVal, oldVal) => {
      initData()
    }
  )*/

  function initData() {
    getData().then(res=> {
      console.log(`card res=>`, res);
    }).catch(err=>{
      console.log(err)
    })
  }


</script>

<style lang="scss" scoped>
.card-basic {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.card-header {
  padding: 10px 0;
  h3 {
    font-size: 16px;
    font-weight:  700;
  }
}
.card-body {
  flex: 1;
}
</style>